<template>
        <div class="login_box">
            <div class="login_yemian">
                <div>
                    记录生活
                </div>
                 <div class="login_card">
                <h2 class="login_title">欢迎登录</h2>

                <div class="login_msg">
                    <p>
                        <input type="text" placeholder="用户名" v-model="username"/>
                    </p>
                    
                    <p>
                         <input type="password" placeholder="密码" v-model="password"/>
                    </p>
                   
                </div>

                <div class="login_mi">
                    <span>
                        <input checked type="checkbox" v-model="remember"/>
                        记住密码
                    </span>
                    <span>忘记密码？</span>
                </div>

                <div class="login_but">
                    <button @click="reset()" style="background-color: #fff;border: 1px solid #ccc;">重置</button>
                    <button @click="login()" style="background: blue;color: white;">登录</button>
                </div>

            </div>
            </div>
           
        </div>
</template>
    
<script setup lang='ts'>
import {getlogin,getauths} from '../request/api'
import {ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'

const router=useRouter()

const username=ref('')
const password=ref('')
// 记住密码的状态
const remember=ref(false)

// 菜单
const auth=ref([])


onMounted(()=>{
    //用来加载页面时，查看账户密码是否存在
    if(localStorage.getItem('remembername') && localStorage.getItem('rememberpassword')){
        username.value=localStorage.getItem('remembername')
        password.value=localStorage.getItem('rememberpassword')
        //记住密码的状态为true
        remember.value=true 
    }

    getauths().then(res=>{
        console.log(res)
        auth.value=res.data.data
    })
})


// login
const login=()=>{
  getlogin({username:username.value,password:password.value}).then(res=>{
    console.log(res);
    if(res.data.code==200){
        // 登录成功后 判断是否记住密码
        if(remember.value){
            localStorage.setItem('remembername',username.value)
            localStorage.setItem('rememberpassword',password.value)
        }else{
            localStorage.removeItem('remembername')
            localStorage.removeItem('rememberpassword')
        }


        // 跳转到首页
        router.push('/')
        // token存入本地
        localStorage.setItem('token',res.data.data.token)
        localStorage.setItem('image',res.data.data.image)
        localStorage.setItem('name',res.data.data.name)
        localStorage.setItem('user_id',res.data.data.user_id)
        localStorage.setItem('auths',JSON.stringify(auth.value))

    }else{
        alert('登录失败')
    }
  })
}

// 重置
const reset=()=>{
    username.value=''
    password.value=''
}
    
</script>
    
<style lang="scss" scoped>
.login_box{
    width: 100vw;
    height: 100vh;
    // background-color: pink;
    position: relative;
    .login_yemian{
        width: 1200px;
        height: 600px;
        background-color: plum;
        position: absolute;
        right: 10%;
        top:10%;
        display: flex;
        justify-content: space-around;
        align-items: center;

         .login_card{
        width: 400px;
        height: 400px;
        background-color: #fff;
        // position: absolute;
        // right: 20%;
        // top:20%;

        .login_title{
            margin:10px 30px 10px 150px ;
        }

        .login_msg{
            // border:1px solid red;
            margin-top:30px;
            margin-left: 50px;
            width: 80%;
            height: 30%;
            input{
                width: 100%;
                height: 30px;
                margin: 10px 0;
            }
        }

        .login_mi{
            //   border:1px solid red;
             margin-top:3px;
            margin-left: 50px;
            width: 80%;
            height: 10%;
            display: flex;
            justify-content: space-between;
            color: blue;
        }

        .login_but{
            //  border:1px solid red;
             margin-top:10px;
            margin-left: 50px;
            width: 80%;
            height: 10%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            button{
                width: 40%;
                height: 30px;
                border-radius:20px ;
                border: none;

            }
        }
    }
    }

   
}
</style>